<template>
  <div class="app-container">
    <div class="filter-container" style="padding: 16px 0;">
      <!-- <el-input v-model="listQuery.driverName" placeholder="司机" style="width: 200px;" class="filter-item el-input--medium" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.ownerName" placeholder="货主" style="width: 200px;" class="filter-item el-input--medium" @keyup.enter.native="handleFilter" />-->

      <el-input
        v-model="search.searchkey"
        placeholder="用户ID/账号/名称/订单号"
        style="width: 200px;"
        class="filter-item el-input--medium"
        @keyup.enter.native="searchList"
      />
      <!-- <el-date-picker
        v-model="search.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>-->

      <el-select v-model="search.type">
        <el-option :value="0" :key="0" label="全部类型"></el-option>
        <el-option :value="1" :key="1" label="个人"></el-option>
        <el-option :value="2" label="公司"></el-option>
      </el-select>
      <el-select v-model="search.billingMethod">
        <el-option :value="0" label="全部开票方式"></el-option>
        <el-option :value="1" label="电子邮件"></el-option>
        <el-option :value="2" label="快递到付"></el-option>
      </el-select>
      <el-select v-model="search.hasCourierNum">
        <el-option :value="0" label="全部快递状态"></el-option>
        <el-option :value="1" label="有快递单号"></el-option>
        <el-option :value="2" label="无快递单号"></el-option>
      </el-select>
      <!-- <el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>-->
      <el-button
        class="el-button filter-item el-button--primary el-button--medium"
        type="primary"
        icon="el-icon-search"
        style="margin-left:8px;"
        @click="searchList"
      >筛选</el-button>
      <el-button
        class="el-button filter-item el-button--primary el-button--medium"
        type="primary"
        icon="el-icon-search"
        style="margin-left:8px;"
        @click="handReset"
      >重置</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="订单时间" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.orderTimeString}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.orderNo }}</span>
          <!-- <el-tag>{{ row.ownerName  }}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="用户ID" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userId }}</span>
          <!-- <el-tag>{{ row.ownerName  }}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center" width="110">
        <template slot-scope="{row}">
          <span>{{ row.userPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nickName }}</span>
          <!-- <el-tag>{{ row.ownerName  }}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="发票金额￥" align="center" width="185">
        <template slot-scope="{row}">
          <span>{{ row.invoicePrice }}</span>
          <!-- <el-tag>{{ row.ownerName  }}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" width="130">
        <template slot-scope="{row}">
          <span v-if="row.type==1">个人</span>
          <span v-if="row.type==2">公司</span>
          <!-- <el-popover v-if="row.frontImg" placement="top-start" trigger="click"> -->
          <!--trigger属性值：hover、click、focus 和 manual-->
          <!-- <a :href="row.frontImg" target="_blank" title="查看最大化图片">
              <img :src="row.frontImg" style="width: 100%;height: 100%" />
            </a>
            <img
              v-if="row.frontImg"
              slot="reference"
              :src="row.frontImg"
              class="carImg"
              style="cursor:pointer"
            />
          </el-popover>
          <p v-else>未上传</p>-->

          <!-- <img :src="row.intoImg" alt class="carImg"> -->
        </template>
      </el-table-column>
      <el-table-column label="公司名称/发票抬头" align="center" width="130">
        <template slot-scope="{row}">
          <!-- <el-popover v-if="row.intoImg" placement="top-start" trigger="click">
       
            <a :href="row.intoImg" target="_blank" title="查看最大化图片">
              <img :src="row.intoImg" style="width: 100%;height: 100%" />
            </a>
            <img slot="reference" :src="row.intoImg" class="carImg" style="cursor:pointer" />
          </el-popover>
          <p v-else>未上传</p>-->
          <span>{{row.invoiceTitle}}</span>
        </template>
      </el-table-column>
      <el-table-column label="税号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.dutyNum }}</span>
        </template>
      </el-table-column>

      <el-table-column label="开票方式" align="center">
        <template slot-scope="{row}">
          <span v-if="row.billingMethod==1">电子邮件</span>
          <span v-if="row.billingMethod==2">快递到付</span>
        </template>
      </el-table-column>

      <el-table-column label="邮箱/快递地址" align="center">
        <template slot-scope="{row}">
          <span>{{ row.collectAddress }}</span>
        </template>
      </el-table-column>

      <el-table-column label="快递单号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.courierNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" @click="orderDetail(row)">订单详情</el-button>
          <el-button type="primary" size="mini" @click="Resendmail(row)">
            <span v-if="row.status==0">发送邮件</span>
            <span v-if="row.status==1">重发邮件</span>
          </el-button>
          <!-- <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
            Publish
          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @pagination="getList"
    />

    <el-dialog :visible.sync="dialogPvVisible" title="详情">
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="right"
        label-width="150px"
        style="width: 400px; margin-left:50px;"
      >
        <!-- <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="表头" />
        <el-table-column prop="value" label="值" />
        </el-table>-->
        <el-form-item label="订单时间" prop="orderTime">
          <el-input v-model="temp.orderTime" placeholder="请输入订单号" :readonly="true" />
          <!-- <el-date-picker
            v-model="temp.orderTime"
            :readonly="true"
            :picker-options="pickerOptions0"
            placeholder="选择日期"
            type="datetime"
            value-format="timestamp"
            format="yyyy-MM-dd HH:MM:SS"
          />-->
          <!-- <el-time-select
            v-model="shipmentTime.time"
            align="center"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00'
            }"
            placeholder="选择时间"
            @change="changeTime"
          />-->
          <!-- <el-date-picker v-model="temp.shipmentTime.start" type="datetime" placeholder="Please pick a date" /> -->
        </el-form-item>
        <el-form-item label="订单号" prop="ordernumber">
          <el-input v-model="temp.ordernumber" placeholder="请输入订单号" :readonly="true" />
        </el-form-item>
        <el-form-item label="用户ID" prop="useid">
          <el-input v-model="temp.useid" placeholder="用户ID" :readonly="true" />
        </el-form-item>
        <el-form-item label="账号" prop="userPhone">
          <el-input v-model="temp.userPhone" placeholder="账号" :readonly="true" />
        </el-form-item>
        <el-form-item label="名称" prop="nickName">
          <el-input v-model="temp.nickName" placeholder="名称" :readonly="true" />
        </el-form-item>
        <el-form-item label="发票金额￥" prop="invoicePrice">
          <el-input v-model="temp.invoicePrice" placeholder="发票金额￥" :readonly="true" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input v-model="temp.type" placeholder="类型" :readonly="true" />
        </el-form-item>
        <el-form-item label="公司名称/发票抬头" prop="invoiceTitle">
          <el-input v-model="temp.invoiceTitle" placeholder="公司名称/发票抬头" :readonly="true" />
        </el-form-item>
        <el-form-item label="税号" prop="dutyNum">
          <el-input v-model="temp.dutyNum" placeholder="税号" :readonly="true" />
        </el-form-item>
        <el-form-item label="开票方式" prop="billingMethod">
          <el-input v-model="temp.billingMethod" placeholder="开票方式" :readonly="true" />
        </el-form-item>
        <el-form-item label="邮箱/快递地址" prop="collectAddress">
          <el-input v-model="temp.collectAddress" placeholder="邮箱/快递地址" :readonly="true" />
        </el-form-item>
        <el-form-item label="快递单号" prop="courierNum">
          <el-input v-model="temp.courierNum" placeholder="无" :readonly="true" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { invoiceList } from "@/api/invoice";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "Invoice",
  components: { Pagination },
  data() {
    return {
      //        禁止选择当前日期之前的日期

      pickerOptions0: {
        disabledDate: (time) => {
          return time.getTime() <= Date.now() - 8.64e7;
        },
      },
      dialogPvVisible: false,
      total: 0,
      value1: "",
      list: [],
      listLoading: true,
      tableKey: 0,
      search: {
        searchkey: "",
        type: 0,
        billingMethod: 0,
        hasCourierNum: 0,
      },
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        importance: undefined,
        title: undefined,
        type: 0,
        orderId: undefined,
        driverName: undefined,
      },
      temp: {
        orderTime: "",
        ordernumber: "",
        useid: "",
        userPhone: "",
        nickName: "",
        invoicePrice: "",
        type: "",
        invoiceTitle: "",
        dutyNum: "",
        billingMethod: "",
        collectAddress: "",
        courierNum: "",
      },
      dialogStatus: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    orderDetail(row) {
      console.log(row);
      this.dialogPvVisible = true;
      this.temp = {
        orderTime: row.orderTimeString,
        ordernumber: row.orderNo,
        useid: row.userId,
        userPhone: row.userPhone,
        nickName: row.nickName,
        invoicePrice: row.invoicePrice,
        type: row.type,
        invoiceTitle: row.invoiceTitle,
        dutyNum: row.dutyNum,
        billingMethod: row.billingMethod,
        collectAddress: row.collectAddress,
        courierNum: row.courierNum,
      };
    },
    Resendmail() {},
    getList() {
      console.log("5555");
      var parm = {
        billingMethod: this.search.billingMethod,
        hasCourierNum: this.search.hasCourierNum,
        search: this.search.searchkey,
        type: this.search.type,
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize,
      };
      invoiceList(parm).then((response2) => {
        console.log(response2);
        // this.gridData = response2.result;
        // this.gridListTotal = response2.page;
        this.total = response2.page.totalRow;
        console.log(response2.page.totalRow);
        this.list = response2.result;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    handleSizeChange(val) {
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    searchList() {
      console.log(this.search);
      this.getList();
    },
    handReset() {
      this.search.searchkey = "";
      this.search.type = 0;
      this.search.billingMethod = 0;
      this.search.collectAddress = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>